<template>
  <view>
    <view class="home_tab">
      <view class="uni-padding-wrap home_tab_title">
        <uni-segmented-control
          :current="current"
          :values="items.map((v) => v.title)"
          @clickItem="onClickItem"
          style-type="text"
          active-color="#83C7B7"
        ></uni-segmented-control>
      </view>
      <view
        class="uni-padding-wrap uni-common-mt home_tab_content"
        v-if="current === 0"
      >
        <view
          class="text-padding-wrap uni-flex uni-row title"
          v-for="i in leadobj"
          :key="i.id"
          @tap="toNewsDetails(i)"
        >
          <view>
            <view>{{ i.title }}</view>
            <view class="beyond-show-ellipsis">{{ i.content }} </view>
            <view class="time"> {{ i.time }}</view>
          </view>
          <view>
            <img class="news-img" :src="i.src" alt="" />
          </view>
        </view>
      </view>
      <view
        class="uni-padding-wrap uni-common-mt home_tab_content"
        v-if="current === 1"
      >
        <view
          class="text-padding-wrap uni-flex uni-row title"
          v-for="i in first"
          :key="i.id"
          @tap="toNewsDetails(i)"
        >
          <view>
            <view>{{ i.title }}</view>
            <view class="beyond-show-ellipsis">{{ i.content }} </view>
            <view class="time"> {{ i.time }}</view>
          </view>
          <view>
            <img class="news-img" :src="i.src" alt="" />
          </view>
        </view>
      </view>
      <view
        class="uni-padding-wrap uni-common-mt home_tab_content"
        v-if="current === 2"
      >
        <view
          class="text-padding-wrap uni-flex uni-row title"
          v-for="i in second"
          :key="i.id"
          @tap="toNewsDetails(i)"
        >
          <view>
            <view>{{ i.title }}</view>
            <view class="beyond-show-ellipsis">{{ i.content }} </view>
            <view class="time"> {{ i.time }}</view>
          </view>
          <view>
            <img class="news-img" :src="i.src" alt="" />
          </view>
        </view>
      </view>
    </view>
    <view class="font">技术支持：嘎嘎哩</view>
  </view>
</template>

<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";
export default {
  components: {
    uniSegmentedControl,
  },
  data() {
    return {
      items: [{ title: "全部" }, { title: "物业资讯" }, { title: "行业动态" }],
      current: 0,
      leadobj: [],
    };
  },
  onLoad(options) {
    this.leadobj = JSON.parse(decodeURIComponent(options.leadobj));
  },
  computed: {
    first() {
      return this.leadobj.filter((item) => item.type == 1);
    },
    second() {
      return this.leadobj.filter((item) => item.type == 2);
    },
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    toNewsDetails(leadobj) {
      uni.navigateTo({
        url:
          "./news_details?leadobj=" +
          encodeURIComponent(JSON.stringify(leadobj)),
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f0f1f3;
}
.uni-padding-wrap {
  background-color: #ffffff;
  /* width:690rpx; */
}
.uni-common-mt {
  margin-top: 30rpx;
}
.home_tab {
  .home_tab_title {
    padding: 0 15px;
    margin: 0 auto;
  }
  .home_tab_content {
  }
}
.news-img {
  width: 80px;
  height: 60px;
}
.beyond-show-ellipsis {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #979797;
  font-size: 12px;
  margin: 5px 0;
}
.time {
  color: #c8c9c8;
  font-size: 10px;
}
.text-padding-wrap {
  background-color: #ffffff;
  padding: 30rpx;
}
.uni-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* margin-bottom: 10px; */
}
.uni-row {
  flex-direction: row;
}

.title {
  border-bottom: 1px #efefef solid;
}
.font {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 12px;
  background-color: #f0f1f3;
}
</style>